<template>
  <div id="coupon-page">
    <div class="page-title" style="background: none; color: #FFFFFF"
         :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>优惠券</span>
    </div>

    <div class="top-page-banner"
         :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <img :style="{height:imageHeight+'px'}" ref="top-page-banner-img" :src="'/static/page-bg/coupon-page-bg.png'"
           alt="">
    </div>


    <i-scroller-box id="coupon-list" ref="i-scroller-box"
                    :url="searchListUrl"
                    :height="getWinSize().height-190-this.getSafeArea().top"
                    :style="{
       width:'100%',
      marginTop:(imageHeight+this.getSafeArea().top)+'px'
    }">

      <template v-slot:list-item="{index,data}">
        <!--单个优惠券-->
        <div class="item" :key="index">
          <div class="left">
            <div class="minus-price" v-text="'￥'+ToMoney(data.reduceMoney)"></div>
            <div class="full-price" v-text="'满￥'+ToMoney(data.fullMoney)+'可用'"></div>
          </div>
          <div class="right">
            <div class="top-box">
              <div class="box1">
                <div class="validity-time" v-text="'有效期: '+data.endDay"></div>
                <div class="get-time" v-text="'开始领取日期: '+data.getDay"></div>
              </div>
              <div class="box2">
                <el-button type="info" v-if="data.status.id===2 && isLogin">已经领取</el-button>
                <el-button type="danger" v-if="data.status.id===1 || !isLogin" @click="getCoupon(data.id)">立即领取
                </el-button>
              </div>
            </div>
            <div class="use-shop ovd_s"
                 v-text="'限于: 【'+(data.shopName?data.shopName:'全平台')+'，'+(data.productClassifyName?data.productClassifyName:'全分类')+'】'"></div>
          </div>
          <div class="c"></div>
        </div>
      </template>

    </i-scroller-box>
  </div>
</template>

<script>
import CartTools from '../tools/CartTools'
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'Cart',
  components: {IScrollerBox},
  data: function () {
    return {
      isLogin: this.CurrUser.IsLogin(),
      imageHeight: (this.getWinSize().width * 0.5),
      searchListUrl: 'Public/couponList',
    }
  },
  mounted () {
    if (this.CurrUser.IsLogin()) {
      this.searchListUrl = 'Public/couponListMember'
    } else {
      this.searchListUrl = 'Public/couponList'
    }
    this.getList({
      url:this.searchListUrl,
    })
  },
  methods: {
    getCoupon: function (id) {
      let $this=this
      $this.checkLoginAct(function () {
        $this.MyRequest($this.ApiDoNameMember + 'Public/getCoupon', {couponId: id}, function (data) {
          $this.getList({
            url:$this.searchListUrl,
            form:{}
          })
          $this.$forceUpdate()
        }, function (data) {
          $this.successTip(data.message, 'error')
          // $this.form.password = ''
        })
      })
    },
    getList: function () {
      this.$refs['i-scroller-box'].getList({url:this.searchListUrl})
    }
  }
}
</script>

<style scoped>

</style>
